<template>
  <div class="myTeamHeadComponent" v-if="oItem">
    <div class="content" :class="'style' + oItem.main.style" :style="{backgroundColor:oItem.main.bgColor,backgroundImage: 'url('+oItem.main.bgImg+')'}">
      <div class="head">
        <div class="left" :style="{color: oItem.main.titleActiveFontColor}">
          <span class="tit">总人数：</span>
          <span class="num">350人</span>
        </div>
        <div class="right" v-if="oItem.main.style == 1" :style="{color: oItem.main.invitationFontColor}">
          <button :style="{color: oItem.main.invitationFontColor}">
            <span>邀请</span>
            <i class="iconfont icon-yaoqingxin"></i>
          </button>
        </div>
      </div>
      <div class="body">
        <div class="left" :class="navIndex === 0 ? 'on' : ''" @click="navIndex = 0">
          <div class="l">
            <p class="p1" :style="{
              color: navIndex === 0?
              oItem.main.titleActiveFontColor:
              oItem.main.titleNormalFontColor
              }">直联·团队</p>
            <p class="p2">总人数</p>
            <p class="p3" :style="{color:
              (navIndex === 0 && oItem.main.style==1) ? oItem.main.navActiveColor :  
                (
                  (navIndex === 0 && oItem.main.style==2) ? oItem.main.titleActiveFontColor:
                  oItem.main.titleNormalFontColor
                )
              }">50</p>
          </div>
          <div class="r" v-if="oItem.main.style == 2">
            <span>直</span>
          </div>
        </div>
        <div class="right" :class="navIndex === 1 ? 'on' : ''" @click="navIndex = 1">
          <div class="l">
            <p class="p1" :style="{color: navIndex === 1? oItem.main.titleActiveFontColor: oItem.main.titleNormalFontColor}">间联·团队</p>
            <p class="p2">总人数</p>
            <p class="p3" :style="{color:
              (navIndex === 1 && oItem.main.style==1) ? oItem.main.navActiveColor :  
                (
                  (navIndex === 1 && oItem.main.style==2) ? oItem.main.titleActiveFontColor:
                  oItem.main.titleNormalFontColor
                )
              }">300</p>
          </div>
          <div class="r" v-if="oItem.main.style == 2">
            <span>间</span>
          </div>
        </div>
        <div
          class="line"
          v-if="oItem.main.style == 1"
          :style="{ left: navIndex === 0 ? '0' : '50%' }"
        >
          <span :style="{backgroundColor:oItem.main.navActiveColor}"></span>
        </div>
      </div>
    </div>
    <button class="invitation" v-if="oItem.main.style==2" :style="{color: oItem.main.invitationFontColor}">
      <i class="iconfont icon-yaoqingxin"></i>
      <span>邀请</span>
    </button>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "myTeamHeadComponent",
  data() {
    return {
      oItem: null,
      navIndex: 0,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => { 
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.myTeamHeadComponent {
  .content {
    border-radius: 10px;
    background-color: #fff;margin-left:15px;margin-right:15px;
    padding: 10px;margin-top:15px;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    &.style1 {
      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 15px 10px;
        margin-bottom: 15px;
        .left {
          display: flex;
          align-items: center;
          .tit {
            display: flex;
          }
          .num {
            display: flex;
          }
        }
        .right {
          display: flex;
          justify-content: flex-end;
          button {
            border: none;
            background-color: transparent;
            color: #e8b57e;
            span {
              margin-right: 3px;
            }
          }
        }
      }
      .body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 5px;
        box-sizing: border-box;
        position: relative;

        .left {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 10px;
          border-radius: 10px;
          box-sizing: border-box;
          padding-bottom: 10px;
          cursor: pointer;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 10%;
            right: 0;
            z-index: 2;
            width: 1px;
            height: 80%;
            background-color: #eee;
          }
          &.on {
            .l {
              .p1 {
                color: #333;
              }
              .p2 {
                color: #999;
              }
              .p3 {
                color: #3875f6;
              }
            }
          }
          .l {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .p1 {
              font-size: 14px;
              color: #777;
            }
            .p2 {
              margin: 10px 0;
              font-size: 12px;
              color: #999;
            }
            .p3 {
              color: #777;
            }
          }
          .r {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 5px;
            span {
              background-color: #e7e7e7;
              width: 60px;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              opacity: 0.4;
              font-size: 32px;
              color: #ffffff;
            }
          }
        }
        .right {
          display: flex;
          width: 50%;
          justify-content: center;
          cursor: pointer;
          align-items: center;
          padding-top: 10px;
          box-sizing: border-box;
          border-radius: 10px;
          padding-bottom: 10px;
          &.on {
            .l {
              .p1 {
                color: #333;
              }
              .p2 {
                color: #999;
              }
              .p3 {
                color: #3875f6;
              }
            }
          }
          .l {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .p1 {
              font-size: 14px;
              color: #777;
            }
            .p2 {
              margin: 10px 0;
              font-size: 12px;
              color: #999999;
            }
            .p3 {
              color: #777;
            }
          }
          .r {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 5px;
            span {
              background-color: #e7e7e7;
              width: 60px;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              opacity: 0.4;
              font-size: 32px;
              color: #ffffff;
            }
          }
        }
        .line {
          position: absolute;
          left: 0;
          bottom: 2px;
          z-index: 2;
          width: 50%;
          background-color: transparent;
          display: flex;
          justify-content: center;
          transition: left 0.3s;
          span {
            width: 30px;
            height: 6px;
            border-radius: 30px;
            display: flex;
            background-color: #3875f6;
          }
        }
      }
    }
    &.style2 {
      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 15px 10px;
        margin-bottom: 15px;
        .left {
          display: flex;
          align-items: center;
          .tit {
            display: flex;
          }
          .num {
            display: flex;
          }
        }
        .right {
          display: flex;
          justify-content: flex-end;
          button {
            border: none;
            background-color: transparent;
            color: #e8b57e;
            span {
              margin-right: 3px;
            }
          }
        }
      }
      .body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        box-sizing: border-box;
        .left {
          width: 50%;
          margin-right: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f5f5f5;
          padding-top: 10px;
          border-radius: 10px;
          padding-left: 20px;
          padding-right: 15px;
          box-sizing: border-box;
          cursor: pointer;
          padding-bottom: 10px;

          .l {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-right: 5px;
            .p1 {
              font-size: 14px;
              color: #888;
            }
            .p2 {
              margin: 5px 0;
              font-size: 12px;
              color: #888;
            }
            .p3 {
              color: #888;
            }
          }
          .r {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            span {
              background-color: #e7e7e7;
              width: 50px;
              height: 50px;
              display: flex;
              align-items: center;
              font-weight: bold;
              justify-content: center;
              border-radius: 100%;
              opacity: 0.4;
              font-size: 28px;
              color: #ffffff;
            }
          }
          &.on {
            background-color: #ebeffb;
            .l {
              .p1 {
                color: #333;
              }
              .p2 {
                color: #999;
              }
              .p3 {
                color: #333;
              }
            }
            .r {
              span {
                background-color: #dcdef5;
                color: #ebeff8;
              }
            }
          }
        }
        .right {
          display: flex;
          width: 50%;
          justify-content: space-between;
          align-items: center;
          padding-top: 10px;
          box-sizing: border-box;
          border-radius: 10px;
          padding-bottom: 10px;
          background-color: #f5f5f5;
          padding-left: 20px;
          padding-right: 15px;
          cursor: pointer;

          .l {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-right: 5px;
            .p1 {
              font-size: 14px;
              color: #888;
            }
            .p2 {
              margin: 5px 0;
              font-size: 12px;
              color: #888;
            }
            .p3 {
              color: #888;
            }
          }
          .r {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            span {
              background-color: #e7e7e7;
              width: 50px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              opacity: 0.4;
              font-weight: bold;
              font-size: 28px;
              color: #ffffff;
            }
          }
          &.on {
            background-color: #ebeffb;
            .l {
              .p1 {
                color: #333;
              }
              .p2 {
                color: #999;
              }
              .p3 {
                color: #333;
              }
            }
            .r {
              span {
                background-color: #dcdef5;
                color: #ebeff8;
              }
            }
          }
        }
      }
    }
  }
  .invitation {
    position: fixed; cursor: pointer;
    /*right: 20px;
    bottom: 60px;*/
    right:calc(50% - 100px);
    bottom: calc(60px + 100px);
    z-index: 10;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    box-shadow: 3px 3px 3px #ddd, -3px 3px 3px #ddd, 3px -3px 3px #ddd, -3px -3px 3px #ddd;
    background-color: #fff;display: flex;justify-content: center;align-items: center;flex-direction:column;
    border:none;color:#F1AC41;
    i{font-size:24px;}
    span{font-size:12px;}
  }
}
</style>
